﻿<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
             xmlns:Commands="clr-namespace:MvcMusicStore.BI.Client.Commands"
             xmlns:BI="clr-namespace:MvcMusicStore.BI.Client.BI"
             xmlns:MvcMusicStore_BI_Client_ModelView="clr-namespace:MvcMusicStore.BI.Client.ModelView"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit" xmlns:System_Windows_Controls_DataVisualization_Charting_Primitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit"
             xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
             x:Class="MvcMusicStore.BI.Client.View.Sales"
             mc:Ignorable="d"
             d:DesignHeight="390"
             d:DesignWidth="545">
  <UserControl.Resources>

    <MvcMusicStore_BI_Client_ModelView:SalesVM x:Key="SalesVMDataSource"
                                               d:IsDataSource="True" />

    <Style x:Key="Title"
           TargetType="{x:Type Grid}">
      <Setter Property="Background">
        <Setter.Value>
          <LinearGradientBrush EndPoint="0.5,1"
                               StartPoint="0.5,0">
            <GradientStop Color="#FF3F3B43"
                          Offset="1" />
            <GradientStop Color="#FFA9AFE0"
                          Offset="0" />
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
    </Style>
  	<Style x:Key="ChartStyle1" TargetType="{x:Type chartingToolkit:Chart}">
  		<Setter Property="BorderBrush" Value="Black"/>
  		<Setter Property="BorderThickness" Value="1"/>
  		<Setter Property="IsTabStop" Value="False"/>
  		<Setter Property="Padding" Value="10"/>
  		<Setter Property="SnapsToDevicePixels" Value="True"/>
  		<Setter Property="Palette">
  			<Setter.Value>
  				<visualizationToolkit:ResourceDictionaryCollection>
  					<ResourceDictionary>
  						<Style x:Key="DataPointStyle" TargetType="{x:Type Control}">
  							<Setter Property="Background">
  								<Setter.Value>
  									<RadialGradientBrush Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  										<GradientStop Color="#FFB9D6F7"/>
  										<GradientStop Color="#FF284B70" Offset="1"/>
  									</RadialGradientBrush>
  								</Setter.Value>
  							</Setter>
  						</Style>
  						<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  							<GradientStop Color="#FFB9D6F7"/>
  							<GradientStop Color="#FF284B70" Offset="1"/>
  						</RadialGradientBrush>
  					</ResourceDictionary>
  					<ResourceDictionary>
  						<Style x:Key="DataPointStyle" TargetType="{x:Type Control}">
  							<Setter Property="Background">
  								<Setter.Value>
  									<RadialGradientBrush Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  										<GradientStop Color="#FFFBB7B5"/>
  										<GradientStop Color="#FF702828" Offset="1"/>
  									</RadialGradientBrush>
  								</Setter.Value>
  							</Setter>
  						</Style>
  						<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  							<GradientStop Color="#FFFBB7B5"/>
  							<GradientStop Color="#FF702828" Offset="1"/>
  						</RadialGradientBrush>
  					</ResourceDictionary>
  					<ResourceDictionary>
  						<Style x:Key="DataPointStyle" TargetType="{x:Type Control}">
  							<Setter Property="Background">
  								<Setter.Value>
  									<RadialGradientBrush Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  										<GradientStop Color="#FFB8C0AC"/>
  										<GradientStop Color="#FF5F7143" Offset="1"/>
  									</RadialGradientBrush>
  								</Setter.Value>
  							</Setter>
  						</Style>
  						<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  							<GradientStop Color="#FFB8C0AC"/>
  							<GradientStop Color="#FF5F7143" Offset="1"/>
  						</RadialGradientBrush>
  					</ResourceDictionary>
  					<ResourceDictionary>
  						<Style x:Key="DataPointStyle" TargetType="{x:Type Control}">
  							<Setter Property="Background">
  								<Setter.Value>
  									<RadialGradientBrush Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  										<GradientStop Color="#FFFDE79C"/>
  										<GradientStop Color="#FFF6BC0C" Offset="1"/>
  									</RadialGradientBrush>
  								</Setter.Value>
  							</Setter>
  						</Style>
  						<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  							<GradientStop Color="#FFFDE79C"/>
  							<GradientStop Color="#FFF6BC0C" Offset="1"/>
  						</RadialGradientBrush>
  					</ResourceDictionary>
  					<ResourceDictionary>
  						<Style x:Key="DataPointStyle" TargetType="{x:Type Control}">
  							<Setter Property="Background">
  								<Setter.Value>
  									<RadialGradientBrush Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  										<GradientStop Color="#FFA9A3BD"/>
  										<GradientStop Color="#FF382C6C" Offset="1"/>
  									</RadialGradientBrush>
  								</Setter.Value>
  							</Setter>
  						</Style>
  						<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  							<GradientStop Color="#FFA9A3BD"/>
  							<GradientStop Color="#FF382C6C" Offset="1"/>
  						</RadialGradientBrush>
  					</ResourceDictionary>
  					<ResourceDictionary>
  						<Style x:Key="DataPointStyle" TargetType="{x:Type Control}">
  							<Setter Property="Background">
  								<Setter.Value>
  									<RadialGradientBrush Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  										<GradientStop Color="#FFB1A1B1"/>
  										<GradientStop Color="#FF50224F" Offset="1"/>
  									</RadialGradientBrush>
  								</Setter.Value>
  							</Setter>
  						</Style>
  						<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  							<GradientStop Color="#FFB1A1B1"/>
  							<GradientStop Color="#FF50224F" Offset="1"/>
  						</RadialGradientBrush>
  					</ResourceDictionary>
  					<ResourceDictionary>
  						<Style x:Key="DataPointStyle" TargetType="{x:Type Control}">
  							<Setter Property="Background">
  								<Setter.Value>
  									<RadialGradientBrush Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  										<GradientStop Color="#FF9DC2B3"/>
  										<GradientStop Color="#FF1D7554" Offset="1"/>
  									</RadialGradientBrush>
  								</Setter.Value>
  							</Setter>
  						</Style>
  						<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  							<GradientStop Color="#FF9DC2B3"/>
  							<GradientStop Color="#FF1D7554" Offset="1"/>
  						</RadialGradientBrush>
  					</ResourceDictionary>
  					<ResourceDictionary>
  						<Style x:Key="DataPointStyle" TargetType="{x:Type Control}">
  							<Setter Property="Background">
  								<Setter.Value>
  									<RadialGradientBrush Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  										<GradientStop Color="#FFB5B5B5"/>
  										<GradientStop Color="#FF4C4C4C" Offset="1"/>
  									</RadialGradientBrush>
  								</Setter.Value>
  							</Setter>
  						</Style>
  						<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  							<GradientStop Color="#FFB5B5B5"/>
  							<GradientStop Color="#FF4C4C4C" Offset="1"/>
  						</RadialGradientBrush>
  					</ResourceDictionary>
  					<ResourceDictionary>
  						<Style x:Key="DataPointStyle" TargetType="{x:Type Control}">
  							<Setter Property="Background">
  								<Setter.Value>
  									<RadialGradientBrush Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  										<GradientStop Color="#FF98C1DC"/>
  										<GradientStop Color="#FF0271AE" Offset="1"/>
  									</RadialGradientBrush>
  								</Setter.Value>
  							</Setter>
  						</Style>
  						<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  							<GradientStop Color="#FF98C1DC"/>
  							<GradientStop Color="#FF0271AE" Offset="1"/>
  						</RadialGradientBrush>
  					</ResourceDictionary>
  					<ResourceDictionary>
  						<Style x:Key="DataPointStyle" TargetType="{x:Type Control}">
  							<Setter Property="Background">
  								<Setter.Value>
  									<RadialGradientBrush Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  										<GradientStop Color="#FFC1C0AE"/>
  										<GradientStop Color="#FF706E41" Offset="1"/>
  									</RadialGradientBrush>
  								</Setter.Value>
  							</Setter>
  						</Style>
  						<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  							<GradientStop Color="#FFC1C0AE"/>
  							<GradientStop Color="#FF706E41" Offset="1"/>
  						</RadialGradientBrush>
  					</ResourceDictionary>
  					<ResourceDictionary>
  						<Style x:Key="DataPointStyle" TargetType="{x:Type Control}">
  							<Setter Property="Background">
  								<Setter.Value>
  									<RadialGradientBrush Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  										<GradientStop Color="#FFADBDC0"/>
  										<GradientStop Color="#FF446A73" Offset="1"/>
  									</RadialGradientBrush>
  								</Setter.Value>
  							</Setter>
  						</Style>
  						<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  							<GradientStop Color="#FFADBDC0"/>
  							<GradientStop Color="#FF446A73" Offset="1"/>
  						</RadialGradientBrush>
  					</ResourceDictionary>
  					<ResourceDictionary>
  						<Style x:Key="DataPointStyle" TargetType="{x:Type Control}">
  							<Setter Property="Background">
  								<Setter.Value>
  									<RadialGradientBrush Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  										<GradientStop Color="#FF2F8CE2"/>
  										<GradientStop Color="#FF0C3E69" Offset="1"/>
  									</RadialGradientBrush>
  								</Setter.Value>
  							</Setter>
  						</Style>
  						<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  							<GradientStop Color="#FF2F8CE2"/>
  							<GradientStop Color="#FF0C3E69" Offset="1"/>
  						</RadialGradientBrush>
  					</ResourceDictionary>
  					<ResourceDictionary>
  						<Style x:Key="DataPointStyle" TargetType="{x:Type Control}">
  							<Setter Property="Background">
  								<Setter.Value>
  									<RadialGradientBrush Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  										<GradientStop Color="Gainsboro"/>
  										<GradientStop Color="#FF757575" Offset="1"/>
  									</RadialGradientBrush>
  								</Setter.Value>
  							</Setter>
  						</Style>
  						<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  							<GradientStop Color="Gainsboro"/>
  							<GradientStop Color="#FF757575" Offset="1"/>
  						</RadialGradientBrush>
  					</ResourceDictionary>
  					<ResourceDictionary>
  						<Style x:Key="DataPointStyle" TargetType="{x:Type Control}">
  							<Setter Property="Background">
  								<Setter.Value>
  									<RadialGradientBrush Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  										<GradientStop Color="#FFF4F4F4"/>
  										<GradientStop Color="#FFB7B7B7" Offset="1"/>
  									</RadialGradientBrush>
  								</Setter.Value>
  							</Setter>
  						</Style>
  						<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  							<GradientStop Color="#FFF4F4F4"/>
  							<GradientStop Color="#FFB7B7B7" Offset="1"/>
  						</RadialGradientBrush>
  					</ResourceDictionary>
  					<ResourceDictionary>
  						<Style x:Key="DataPointStyle" TargetType="{x:Type Control}">
  							<Setter Property="Background">
  								<Setter.Value>
  									<RadialGradientBrush Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  										<GradientStop Color="#FFF4F4F4"/>
  										<GradientStop Color="#FFA3A3A3" Offset="1"/>
  									</RadialGradientBrush>
  								</Setter.Value>
  							</Setter>
  						</Style>
  						<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
  							<GradientStop Color="#FFF4F4F4"/>
  							<GradientStop Color="#FFA3A3A3" Offset="1"/>
  						</RadialGradientBrush>
  					</ResourceDictionary>
  				</visualizationToolkit:ResourceDictionaryCollection>
  			</Setter.Value>
  		</Setter>
  		<Setter Property="TitleStyle">
  			<Setter.Value>
  				<Style TargetType="{x:Type visualizationToolkit:Title}">
  					<Setter Property="FontSize" Value="16"/>
  					<Setter Property="HorizontalAlignment" Value="Center"/>
  					<Setter Property="Margin" Value="0,10"/>
  				</Style>
  			</Setter.Value>
  		</Setter>
  		<Setter Property="LegendStyle">
  			<Setter.Value>
  				<Style TargetType="{x:Type visualizationToolkit:Legend}">
  					<Setter Property="Margin" Value="15,0"/>
  					<Setter Property="VerticalAlignment" Value="Center"/>
  					<Setter Property="BorderBrush" Value="#FFDBDBDB"/>
  					<Setter Property="Background">
  						<Setter.Value>
  							<LinearGradientBrush EndPoint="0.442,0.005" StartPoint="0.558,0.995">
  								<GradientStop Color="#FFDBDBDB"/>
  								<GradientStop Color="White" Offset="1"/>
  							</LinearGradientBrush>
  						</Setter.Value>
  					</Setter>
  				</Style>
  			</Setter.Value>
  		</Setter>
  		<Setter Property="ChartAreaStyle">
  			<Setter.Value>
  				<Style TargetType="{x:Type Panel}">
  					<Setter Property="MinWidth" Value="100"/>
  					<Setter Property="MinHeight" Value="75"/>
  				</Style>
  			</Setter.Value>
  		</Setter>
  		<Setter Property="PlotAreaStyle">
  			<Setter.Value>
  				<Style TargetType="{x:Type Grid}">
  					<Setter Property="Background">
  						<Setter.Value>
  							<LinearGradientBrush EndPoint="0.457,0.296" StartPoint="0.459,1.296">
  								<GradientStop Color="#FFCBCBCB"/>
  								<GradientStop Color="White" Offset="1"/>
  							</LinearGradientBrush>
  						</Setter.Value>
  					</Setter>
  				</Style>
  			</Setter.Value>
  		</Setter>
  		<Setter Property="Template">
  			<Setter.Value>
  				<ControlTemplate TargetType="{x:Type chartingToolkit:Chart}">
  					<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
  						<Grid>
  							<Grid.RowDefinitions>
  								<RowDefinition Height="Auto"/>
  								<RowDefinition Height="*"/>
  							</Grid.RowDefinitions>
  							<visualizationToolkit:Title Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}"/>
  							<Grid Margin="0,15" Grid.Row="1">
  								<Grid.ColumnDefinitions>
  									<ColumnDefinition Width="*"/>
  									<ColumnDefinition Width="Auto"/>
  								</Grid.ColumnDefinitions>
  								<visualizationToolkit:Legend x:Name="Legend" Grid.Column="1" Style="{TemplateBinding LegendStyle}" Title="{TemplateBinding LegendTitle}"/>
  								<System_Windows_Controls_DataVisualization_Charting_Primitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
  									<Grid Style="{TemplateBinding PlotAreaStyle}" Panel.ZIndex="-1" Background="#00000000"/>
  									<Border BorderBrush="#FF919191" BorderThickness="1" Panel.ZIndex="10"/>
  								</System_Windows_Controls_DataVisualization_Charting_Primitives:EdgePanel>
  							</Grid>
  						</Grid>
  					</Border>
  				</ControlTemplate>
  			</Setter.Value>
  		</Setter>
  	</Style>

  </UserControl.Resources>

  <Grid DataContext="{Binding Source={StaticResource SalesVMDataSource}}">
    <Grid.RowDefinitions>
      <RowDefinition Height="50" />
      <RowDefinition Height="10" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Commands:LoadSalesCommand x:Name="LoadSales"
                               SalesByMonth="{Binding SalesByMonth, Mode=TwoWay}"
                               SalesByGenre="{Binding SalesByGenre, Mode=TwoWay}">
      <i:Interaction.Triggers>
        <i:EventTrigger EventName="Loaded">
          <i:InvokeCommandAction Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type ICommand}}}" />
        </i:EventTrigger>
      </i:Interaction.Triggers>
    </Commands:LoadSalesCommand>
    
    <Grid Grid.Row="0"
          Style="{DynamicResource Title}">
      <TextBlock Text="Sales"
                 FontSize="24"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center"
                 Foreground="White">
        <TextBlock.Effect>
          <DropShadowEffect />
        </TextBlock.Effect>
      </TextBlock>
    </Grid>
    <Grid Grid.Row="1">
      <Grid.Background>
        <LinearGradientBrush EndPoint="0.5,1"
                             StartPoint="0.5,0">
          <GradientStop Color="#FF3F3B43" />
          <GradientStop Color="#FF968E9F"
                        Offset="1" />
        </LinearGradientBrush>
      </Grid.Background>
    </Grid>
    <Grid Grid.Row="2"
          Background="#FF968E9F">

      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="0.5*" />
          <ColumnDefinition Width="0.498*" />
          <ColumnDefinition Width="0.002*"/>
        </Grid.ColumnDefinitions>
        <chartingToolkit:Chart Title="Sales by Month"
                               Background="Transparent"
                               Margin="5" 
                               Style="{DynamicResource ChartStyle1}" BorderThickness="0">
          <chartingToolkit:PieSeries DependentValuePath="Amount"
                                     IndependentValuePath="Month"
                                     ItemsSource="{Binding SalesByMonth}"
                                     IsSelectionEnabled="True" />
        </chartingToolkit:Chart>
        <chartingToolkit:Chart Grid.Column="1"
                               Title="Sales by Genre"
                               Background="Transparent"
                               Margin="5,5,4,5"
                               Style="{DynamicResource ChartStyle1}" BorderThickness="0">
          <chartingToolkit:PieSeries DependentValuePath="Amount"
                                     IndependentValuePath="Genre"
                                     ItemsSource="{Binding SalesByGenre}"
                                     IsSelectionEnabled="True" />
        </chartingToolkit:Chart>
        <!--<ListView Grid.Column="1" ItemsSource="{Binding SalesByMonth}" Margin="5">
      		<ListView.View>
      			<GridView>
              <GridViewColumn Width="110" Header="Month" DisplayMemberBinding="{Binding Month}" />
              <GridViewColumn Width="80" Header="Amount" DisplayMemberBinding="{Binding Amount}" />
      			</GridView>
          </ListView.View>
      	</ListView>-->
      </Grid>
    </Grid>

    <Button Content="Refresh" HorizontalAlignment="Right" Margin="0,10,47,0" VerticalAlignment="Top">
    	<i:Interaction.Triggers>
    		<i:EventTrigger EventName="Click">
    			<i:InvokeCommandAction Command="{Binding ElementName=LoadSales, Mode=OneWay}"/>
    		</i:EventTrigger>
    	</i:Interaction.Triggers>
    </Button>

  </Grid>
</UserControl>